<template>
	<div>
		<a-card>
			<a-table :columns="columns" :data-source="page.list" rowKey="id" bordered :pagination="false"
				:loading="loading">
				<template slot="status" slot-scope="text">
<!-- 					<a-tag v-if="text === -1" color="#d01e47">
						永久删除
					</a-tag> -->
					<a-tag v-if="text === 0" color="#3973d0">
						审核中
					</a-tag>
					<a-tag v-if="text === 1" color="#87d068">
						审核通过
					</a-tag>
					<a-tag v-if="text === 2" color="#733ed0">
						已回复
					</a-tag>
				</template>
				<template slot="replyMsg" slot-scope="text,record">
					<span v-if="text != 'todo'">
						{{text}}
					</span>
					<a-button v-else type="primary" size="small" @click="handleBoardEdit(record.id)">
						回复
					</a-button>
				</template>
				<template slot="operation" slot-scope="text,record">
					<div class="editable-row-operations">
						<a-button type="link" size="small" @click="readMsgBoard(record.id)">
							查看
						</a-button>
						<a-popconfirm v-if="record.status === 0" title="你确定要启用吗？" ok-text="Yes" cancel-text="No"
							@confirm="handleBoardEnable(record)">
							<a-button size="small">
								启用
							</a-button>
						</a-popconfirm>
						<a-popconfirm v-else-if="record.status > 0" title="你确定要禁用吗？" ok-text="Yes" cancel-text="No"
							@confirm="handleBoardEnable(record)">
							<a-button size="small" type="primary">
								禁用
							</a-button>
						</a-popconfirm>
						<a-popconfirm title="你确定要删除吗？" ok-text="Yes" cancel-text="No"
							@confirm="deleteBoard (record.id)">
							<a-button size="small" type="danger">
								删除
							</a-button>
						</a-popconfirm>
					</div>
				</template>
			</a-table>
			<a-pagination
				v-model="page.currentPage"
				:page-size-options="['5','10','20','50']"
				:total="page.totalCount"
				show-size-changer
				:page-size="page.pageSize"
				@showSizeChange="onSizeChange"
				@change="onPageChange">
			</a-pagination>
		</a-card>
		<!-- 编辑留言板 -->
		<a-modal v-model="editModalVisable" title="编辑留言板" :footer="false">
			<MsgBoardEdit :id="boardId" @close="closeEditModal"></MsgBoardEdit>
		</a-modal>
		<!-- 查看 msgBoard -->
		<a-modal v-model="readModalVisable" title="查看留言板" :footer="false">
			<MsgBoardDetail :id="boardId"></MsgBoardDetail>
		</a-modal>
	</div>
</template>

<script>
	import {
		getBoardByPage,
		updateBoardStatus
	} from '@/api/System.js'
	import {
		msgBoardColumns as columns
	} from '@/assets/js/tableList/SystemTable.js'
	import MsgBoardEdit from './MsgBoardEdit.vue'
	import MsgBoardDetail from './MsgBoardDetail.vue'
	export default {
		name: 'MsgBoardList',
		components: {
			MsgBoardEdit,
			MsgBoardDetail
		},
		data() {
			return {
				boardId: 0,
				editModalVisable: false,
				readModalVisable: false,
				loading: true,
				columns: [],
				page: {
					currentPage: 1, // 当前页
					pageSize: 5, // 每页显示条数
					totalPage: 0, // 总页数
					totalCount: 0, // 总条数
					params: {}, // 查询参数对象
					list: [], // 数据
					sortColumn: '', // 排序列
					sortMethod: 'asc' // 排序方式
				}
			}
		},
		mounted() {
			this.initList()
			this.getBoardList()
		},
		methods: {
			// 加载 留言板 列表
			async getBoardList() {
				const {data : res} = await getBoardByPage(this.page)
				console.log(res)
				if (res.code !== 20005)
					return this.$message.error('列表加载出错')
				this.page = res.data
				this.page.index = undefined
				this.loading = false
				this.$message.success(res.msg)
			},
			initList() {
				this.columns = columns
			},
			handleBoardEdit (id) {
				this.boardId = id
				this.editModalVisable = true
			},
			// 查看留言板
			readMsgBoard (id) {
				this.boardId = id
				this.readModalVisable = true
			},
			closeEditModal (val) {
				this.editModalVisable = val
				this.getBoardList()
				location.reload();
			},
			onPageChange (newPage) {
				this.page.currentPage = newPage
				this.getBoardList()
			},
			// 页面变化
			onSizeChange(current, newSize) {
				this.page.pageSize = newSize;
				this.getBoardList()
			},
			// 删除留言信息
			async deleteBoard (id) {
				const {
					data : res
				} = await updateBoardStatus(-1,id)
				if (res.code !== 20008)
					return this.$message.error('删除失败')
				let arr = this.page.list
				arr.forEach((item, index, res) => {
					if (item.id == id) {
						res.splice(index,1)
					}
				})
				this.$message.success('删除成功')
			},
			// 启用 or 禁用 ()
			async handleBoardEnable (scope) {
				let id = scope.id
				let status = scope.status
				let state = status > 0 ? 0 : (scope.replyMsg === 'todo') ? 1 : 2 
				console.log(id, state)
				const {
					data : res
				} = await updateBoardStatus(state,id)
				if (res.code !== 20008)
					return this.$message.error('更新失败')
				this.getBoardList()
				this.$message.success(res.msg)
			}
		}
	}
</script>

<style>
</style>
